import React from "react";
import axios from "axios";
import "./App.css";
import ListItem from "./components/listItem";
import { DropdownMenu, Image } from "react-vant";
import DropdownMenu1 from './components/drop-down-menu'
import LazyLoadImage from "./components/lazyLoadImage";

const options = [
  "万达影城",
  "博纳国际影城",
  "耀菜成龙国际影城",
  "保利国际影城",
  "大地影院",
  "华联影城",
  "金逸影城",
  "CGV影城",
  "中影国际影城",
  "完美世界影城",
  "首都电影院",
].map((v) => {
  return { text: v, value: v };
});

class App extends React.Component {
  state = {
    list: [],
    show: false,
    value: {},
  };
  // 获取数据
  getList(product = "") {
    axios.get("/api/list", { params: { product } }).then((resp) => {
      console.log(resp.data.data);
      this.setState({
        list: resp.data.data,
      });
    });
  }
  // 关闭弹框
  closeDialog() {
    // 方式一：
    // const dialog = document.querySelector('.dialog');
    // dialog.style.display = 'none'
    // 方式二：
    this.setState({
      show: false,
    });
  }

  componentDidMount() {
    this.getList();

    setTimeout(() => {
      this.closeDialog();
    }, 3000);
  }
  render() {
    const { list, show } = this.state;

    return (
      <div>
        <DropdownMenu1 onChange={(v) => this.getList(v.product)}>
          <DropdownMenu1.Item
            name="product"
            option={options}
            title="品牌"
          ></DropdownMenu1.Item>
          <DropdownMenu1.Item
            name="product"
            option={options}
          ></DropdownMenu1.Item>
        </DropdownMenu1>
        <div className="list">
          {list.map((v, i) => {
            return <ListItem key={i} v={v}></ListItem>;
          })}
        </div>
        <div>
        </div>
        {show && (
          <div className="dialog">
            <div className="content">
              <div className="title">
                <span onClick={() => this.closeDialog()}>X</span>
              </div>
              我是谈来那个的内容
            </div>
          </div>
        )}
        <Image src="https://robohash.org/123?set=set5" lazyload />
        <LazyLoadImage src="https://wx1.sinaimg.cn/mw690/001qggumgy1hkqzmkf7rgj61eb1qwakp02.jpg"></LazyLoadImage>
      </div>
    );
  }
}

export default App;
